<template>
	<view class="cgpw">
		<view class="cgpw-box">
			<view class="box-item">
				<text class="iconfont">&#xe637;</text>
				<view class="input-box">
					<input type="number" v-model="phoneText" maxlength="11" placeholder="手机号" placeholder-class="placeholder"/>
				</view>
				
			</view>
			<view class="box-item">
				<text class="iconfont">&#xe7aa;</text>
				<view class="input-box">
					<input type="number" v-model="QRtext" maxlength="6" placeholder="短信验证码" placeholder-class="placeholder"/>
					<button :class="['getQRcode',QRcodeFlag ? 'QRbtn2' : 'QRbtn1']" @click="getQRcode" :disabled="QRcodeFlag">{{QRcodetext}}</button>
				</view>
				
			</view>
			<view class="box-item">
				<text class="iconfont">&#xe625;</text>
				<view class="input-box">
					<input type="password" v-model="password1" maxlength="16" placeholder="填写新密码" placeholder-class="placeholder"/>
					<text class="password-ts" v-show="passwordFlag"> <text class="iconfont">&#xe626;</text>两次密码填写不一致</text>
				</view>
				
			</view>
			<view class="box-item">
			
				<text class="iconfont">&#xe625;</text>
				<view class="input-box">
					<input type="password" v-model="password2" @blur="confirmPassword" maxlength="16" placeholder="确认新密码" placeholder-class="placeholder"/>
				</view>
				
			</view>
		</view>
		
		<!-- 确认按钮 -->
		<view class="queren" @click="onConfi">
			确认
		</view>
		<view class="cp-footer">
			本操作将会重置您的登录密码，请牢记您的新密码
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneText: '',
				QRcodeFlag: false,
				QRcodetext: '获取验证码',
				passwordFlag: false,
				password1: '',
				password2: '',
				QRtext: ''
			}
		},
		methods: {
			// 点击确认按钮
			onConfi(){
				let passwordConfi = this.password1 == this.password2
				if ((/^1[34578]\d{9}$/.test(this.phoneText)) && passwordConfi && (this.QRtext.length == 6)){
					uni.showToast({
						title: '密码修改成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: '信息填写有误',
						icon: 'none'
					});
				}
			},
			// 确认密码是否一致
			confirmPassword(){
				console.log(this.password1)
				console.log(this.password2)
				if(this.password1 !== this.password2){
					this.passwordFlag = true
				}else{
					this.passwordFlag = false
				}
			},
			getQRcode() {
				let intervalTime = 60;
					if (!(/^1[34578]\d{9}$/.test(this.phoneText))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '获取验证码成功',
						icon: 'none'
					});
					this.QRcodeFlag = true;
					let intervalId = setInterval(() => {
						intervalTime--;
						this.QRcodetext = `(${intervalTime}s)`
						if (intervalTime <= 0) {
							clearInterval(intervalId)
							this.QRcodetext = "获取验证码"
							this.QRcodeFlag = false;
						}
					}, 1000)
				}	
			},
			
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/smallCommon.scss'
</style>